<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import sm3Text from '@/utils/sm3'
import RoleInfo from '@/components/role-info/index.vue'
import DiyInput from '@/components/diy-input/index.vue'
import router from '@/router'
import zzjgService from '@/api/zzjg'
import { useZzjgStore } from '@/store/zzjg'
import { useMainStore } from '@/store/main'
import pinyin from 'pinyin-match'
const userInfo = useMainStore().userInfo
const roleInfoMsg = computed<any[]>(() => useZzjgStore().roleInfoMsg)
const plainOptions = ['同步部门信息', '同步角色信息', '同步人员信息', '同步人员角色分配信息']
// table表头
const personMessegeColumns = [
  {
    title: '姓名',
    dataIndex: 'mc',
    width: '7%',
    ellipsis: true,
  },
  {
    title: '登录名',
    dataIndex: 'dlbm',
    ellipsis: true,
    width: '7%',
  },
  {
    title: '手机号码',
    dataIndex: 'dhhm',
    ellipsis: true,
  },
  {
    title: '电子邮件',
    dataIndex: 'dzyj',
    width: '11%',
    ellipsis: true,
  },
  {
    title: '登录方式',
    dataIndex: 'dlfs',
    ellipsis: true,
  },
  {
    title: '在职状态',
    dataIndex: 'zzzt',
    ellipsis: true,
    width: '7%',
  },
]
// 隐藏操作表格框
const personMessegeColumns2 = [
  {
    title: '姓名',
    dataIndex: 'mc',
    width: '7%',
    ellipsis: true,
  },
  {
    title: '登录名',
    dataIndex: 'dlbm',
    width: '7%',
    ellipsis: true,
  },
  {
    title: '手机号码',
    dataIndex: 'dhhm',
    ellipsis: true,
  },
  {
    title: '电子邮件',
    dataIndex: 'dzyj',
    width: '11%',
    ellipsis: true,
  },
  {
    title: '登录方式',
    dataIndex: 'dlfs',
    ellipsis: true,
  },
  {
    title: '在职状态',
    dataIndex: 'zzzt',
    ellipsis: true,
    width: '7%',
  },
]
// table表头(隐藏角色)
const personMessegeColumns1 = [
  {
    title: '姓名',
    dataIndex: 'mc',
    width: '7%',
    ellipsis: true,
  },
  {
    title: '登录名',
    dataIndex: 'dlbm',
    ellipsis: true,
    width: '7%',
  },
  {
    title: '角色名称',
    dataIndex: 'jsmc',
    ellipsis: true,
  },
  {
    title: '手机号码',
    dataIndex: 'dhhm',
    ellipsis: true,
  },
  {
    title: '电子邮件',
    dataIndex: 'dzyj',
    width: '11%',
    ellipsis: true,
  },
  {
    title: '登录方式',
    dataIndex: 'dlfs',
    ellipsis: true,
  },
  {
    title: '在职状态',
    dataIndex: 'zzzt',
    ellipsis: true,
    width: '7%',
  },
]

const huishouzhanRyColumns = [
  {
    title: '单位',
    dataIndex: 'zzdwmc',
  },
  {
    title: '名称',
    dataIndex: 'mc',
  },
  {
    title: '工作证号',
    dataIndex: 'gzzh',
  },
  {
    title: '电话',
    dataIndex: 'dhhm',
  },
  {
    title: '电子邮箱',
    dataIndex: 'dzyj',
  },
  {
    title: '是否临时人员',
    dataIndex: 'sflsry',
  },
  {
    title: '是否停职',
    dataIndex: 'zzzt',
  },
]
const dwList = ref<any[]>([])
const defaultProps = {
  children: 'children',
  label: 'dwmc',
}
const defaultProps1 = {
  children: 'children',
  label: 'mc',
}
const dwbm = ref('')

const shengFenml = ref<any[]>([]) //身份
const record = ref({})
const modifyDialog = ref(false)
const nodeMessege = ref<any>({}) //节点信息
const tableSearch = ref('')
const bmSelectList = ref<any[]>([])
const replaceFields = {
  children: 'children',
  label: 'mc',
}
const addChildFormFbmbm = ref('')
const zzjgml = ref<any[]>([]) //组织结构目录
const temporaryValue = ref<any[]>([]) //临时组织结构目录
const selectTreeNode = ref('') //默认选中节点
const personMessegeData = ref<any[]>([])
const selectedTable = ref<any[]>([])
const selectedTable2 = ref<any[]>([])
const recycleSelectedTable = ref<any[]>([])
const showDepartment = ref(false)
const showBmRole = ref(false)
const showSetLoginMode = ref(false)
const showPerson = ref(false)
const showChildDeparment = ref(false)
const showCopyRole = ref(false)
// 分页
// 查询列表
const getTable = async () => {
  loading.value = true
  const data = {
    ...searchTableParams.value,
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }
  const res: any = await zzjgService.queryTable(data)

  loading.value = false
  personMessegeData.value = res.data.list
  pagination.value.total = res.data.total
}
const pagination = ref({
  pageSize: 10, // 一页的数据限制
  current: 1, // 当前页
  total: 0, // 总数
  pageChange: (val: { pageSize?: number; pageIndex?: number }) => {
    // 改变 pageSize时的回调
    pagination.value.current = val.pageIndex || pagination.value.current
    pagination.value.pageSize = val.pageSize || pagination.value.pageSize
    getTable()
  },
})
const addDiaKeyWorld = ref('')
const queryTableDiaApi = async () => {
  const data = {
    filter: {
      ...nodeMessege.value.params,
      keyWorld: addDiaKeyWorld.value,
    },
    pageNum: pagination2.value.current,
    pageSize: pagination2.value.pageSize,
  }
  const res: any = await zzjgService.queryRyList(data)
  addTableData.value = res.list
  pagination2.value.total = res.total
}
//添加人员对话框单独分页
const pagination2 = ref({
  pageSize: 10, // 一页的数据限制
  current: 1, // 当前页
  total: 0, // 总数
  pageChange: (val: { pageSize?: number; pageIndex?: number }) => {
    // 改变 pageSize时的回调
    pagination2.value.current = val.pageIndex || pagination2.value.current
    pagination2.value.pageSize = val.pageSize || pagination2.value.pageSize
    queryTableDiaApi()
  },
})
const searchTableParams = ref({
  filter: {
    dwbm: '', //
    keyWorld: '',
  },
  orderBy: '',
})
const modifyPersonForm = ref<any>({
  bmbm: '',
  bmmc: '',
  dhhm: '',
  dlbm: '',
  dlfs: '',
  dzyj: '',
  jsbm: '',
  jsmc: '',
  mc: '',
  rybm: '',
  rylx_bm: '',
  rylx_mc: '',
  zzzt: '',
  sfzh: '',
  zzdwbm: '',
  jcrysf_dm: '',
})
const showDrawerFlag = ref(false)
const recycleVisible = ref(false) //气泡框
// 添加部门
const addForm = ref({
  bmmc: '',
  bmjc: '',
  bmwhjc: '',
  bmahjc: '',
  bmxh: '',
  fbmbm: '',
  sflsbm: '',
  bmlbList: [],
  bmlb: '',
  bz: '',
})
// 设置登录方式
const setLoginForm = ref({
  range: '', //范围
  region: '', //方式
})
const level = ref<string | number>('1')
//添加角色
const bmRoleForm = ref<any>({
  jsmc: '',
  spjbbm: '',
  zjldbm: '',
  mrzjldmc: '',
})
//添加子部门
const addChildForm = ref<any>({
  bmmc: '',
  bmlbList: [],
})
const addPersonForm = ref<any>({
  dlbm: '',
  mc: '',
  xh: '',
  sflsry: 'N',
  dhhm: '',
  sfzh: '',
  rylx_mc: '',
  rylx_bm: '',
  jcrysf_dm: '',
  jcrysf_mc: '',
})
// end
const addTableData = ref<any[]>([])
// 回收站
const huishouzhanLists = ref<any[]>([])
const huishouzhanRyLists = ref<any[]>([])
const huishouzhanBmglParams = ref({
  filter: {
    bmjc: '',
    bmmc: '',
    dwbm: '', //
  },
  orderBy: '',
})
const huishouzhanRyParams = ref({
  filter: {
    gzzh: '',
    mc: '',
    zzdwbm: '', //
  },
  orderBy: '',
})

const gzzh = ref('')
const mc = ref('')
const cjrybm = ref('')
const cjrymc = ref('')
const defaultExpandedKeys = ref<any[]>([]) //默认展开
const treeExpandedKeys = ref<any[]>([])
const bmTitle = ref('添加部门')
const dwInfoMesseage = ref<any>({})
const bmInfoMesseage = ref<any>({})
const roleInfoMesseage = ref<any>({})
const tabTitle = ref('单位信息')
const personalInformation = ref<any>({})
const copyRoleLists = ref<any[]>([])
const copyRoleLists1 = ref<any[]>([])
const showChangeRole = ref(false)
const changeRoleForm = ref<any>({
  jsmc: '',
  spjbbm: '',
})
const tbbmsjDia = ref(false)
const checkedList = ref<any[]>([])
const bmlbListsApi = ref<any[]>([])
const loading = ref(false)
const spxsmcLists = ref<any[]>([])
const rylxLists = ref<any[]>([])
const mrzjldTest = ref<any[]>([])
const mrzjldml = ref<any[]>([])
const searchTreeValue = ref('')
const modifyActiveKey = ref('1')
const resetDia = ref(false)
const ruleForm = ref({
  pass: '',
  checkPass: '',
})
const resetVal = ref<any>({})
const getDwbmList = async () => {
  dwList.value = (await zzjgService.getDwbm({ dwbm: userInfo.dwbm })) as unknown as any[]
  dwbm.value = dwList.value[0]?.dwbm
  changeTree()
}
getDwbmList()
const changeTree = () => {
  huishouzhanBmglParams.value.filter.dwbm = userInfo.dwbm
  huishouzhanRyParams.value.filter.zzdwbm = userInfo.dwbm
  defaultExpandedKeys.value = [userInfo.dwbm]

  // 父部门得下拉列表
  getBmSelectLists()
  cjrybm.value = userInfo.rybm
  cjrymc.value = userInfo?.mc
  getTreeList2()

  getTreeList()
  getRecycleBm()
  getRecycleRy()
  getRylxLists()
  getShengFenLists()
  mrzjldTreeList()
}

const changeDiaClose = () => {
  useZzjgStore().CHANGEROLEINFO([])
}
const reset = (item: any) => {
  resetDia.value = true
  resetVal.value = item
}
const czcancel = () => {
  resetDia.value = false
  resetVal.value = null
  ruleForm.value = {
    pass: '',
    checkPass: '',
  }
}
const resetDiaBtn = () => {
  // debugger
  if (ruleForm.value.pass !== '' && ruleForm.value.checkPass !== '') {
    if (ruleForm.value.pass === ruleForm.value.checkPass) {
      zzjgService
        .chongzhimima({
          kl: ruleForm.value.pass ? sm3Text(ruleForm.value.pass) : '',
          rybm: resetVal.value.rybm,
          zzdwbm: resetVal.value.zzdwbm,
        })
        .then(() => {
          czcancel()
          ElMessage.success('操作成功')
        })
    } else {
      ElMessage.success('两次输入密码不一致，请保持一致')
    }
  } else {
    ElMessage.success('密码不能为空')
  }
}

// 回收站人员选中
const rYOnSelectChange = (selectedTable: any[]) => {
  recycleSelectedTable.value = selectedTable
}
// table表格选中
const onSelectChange = (table: any[]) => {
  selectedTable.value = table
}
const getRylxLists = async () => {
  rylxLists.value = (await zzjgService.queryBmTable({ lbbm: '9902' })).data
}
// 身份
const getShengFenLists = async () => {
  shengFenml.value = (await zzjgService.queryBmTable({ lbbm: '9979' })).data
}

const toGoYhsq = () => {
  useZzjgStore().CHANGENODEMESSEGE(nodeMessege.value)
  router.push({
    path: '/permission/swxyhqx',
    query: {
      id: nodeMessege.value.id,
    },
  })
}
const addDia = () => {
  showDrawer()
}
// 单独的table查询
const onSearch2 = () => {
  queryTableDiaApi()
}
// 添加角色弹框
const addRoleDia = (text: any) => {
  const data = {
    bmbm: nodeMessege.value.params.bmbm,
    bz: '',
    cjrbm: userInfo.rybm,
    cjrmc: userInfo.mc,
    dwbm: dwbm.value,
    jsbm: nodeMessege.value.params.jsbm,
    ryList: [{ mc: text.mc, rybm: text.rybm, ryxh: text.xh }],
  }
  zzjgService.addryjsfp(data).then(() => {
    ElMessage.success('添加成功')
    showPerson.value = false
    getTreeList()
  })
}

const closeAddRy = () => {
  selectedTable2.value = []
}

// 修改人员
const onEdit = (row: any) => {
  modifyActiveKey.value = '1'
  record.value = { ...row }
  modifyPersonForm.value = { ...row }
  modifyDialog.value = true
}
// 解锁
const jieShuo = (item: any) => {
  zzjgService.jieShuoApi({ rybm: item.rybm, zzdwbm: item.zzdwbm }).then(() => {
    ElMessage.success('解锁成功')
    getTable()
  })
}
const jieShuo2 = () => {
  zzjgService
    .jieShuoApi({
      rybm: nodeMessege.value.params.rybm,
      zzdwbm: nodeMessege.value.params.zzdwbm,
    })
    .then(() => {
      ElMessage.success('解锁成功')
      getPersonInfo()
    })
}
// 修改确定按钮
const modifySureBtn = () => {
  if (
    !(
      modifyPersonForm.value.dlbm &&
      modifyPersonForm.value.mc &&
      modifyPersonForm.value.sfzh &&
      modifyPersonForm.value.dhhm &&
      modifyPersonForm.value.xh !== undefined &&
      modifyPersonForm.value.dlfs &&
      modifyPersonForm.value.jcrysf_dm
    )
  ) {
    ElMessage.error('请完善必填项信息')
    return
  }

  // 判断是否选择角色 如果没选择角色,
  if (roleInfoMsg.value.length === 0) {
    ElMessageBox.confirm('当前人员未设置角色, 是否继续保存?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      changePersonApi()
    })
  } else {
    // 选择了角色,审批级别就必须填
    if (roleInfoMsg.value.length > 0) {
      for (const el of roleInfoMsg.value) {
        if (!el.spjbbm) {
          ElMessage.warning('请设置审批级别')
          return
        }
      }
    }
    changePersonApi()
  }
}
// 修改人员 api
const changePersonApi = () => {
  loading.value = true
  const rylx_mcArr = rylxLists.value.filter((item) => addPersonForm.value.rylx_bm === item.dm)

  const arr = rylxLists.value.filter((val) => val.dm === modifyPersonForm.value.rylx_bm)

  const data = {
    ...modifyPersonForm.value,
    zhxgrbm: userInfo.rybm,
    jsList:
      (roleInfoMsg.value &&
        roleInfoMsg.value.map((item) => {
          return {
            bmbm: item.params.bmbm,
            dwbm: item.params.dwbm,
            jsbm: item.params.jsbm,
            spjbbm: item.spjbbm,
            zjldbm: item.zjldbm,
          }
        })) ||
      [],
    rylx_mc: rylx_mcArr.length > 0 && rylx_mcArr[0].mc,
  }

  data.rylx_mc = arr[0].mc

  zzjgService.updateRybm(data).then(() => {
    ElMessage.success('修改成功')
    useZzjgStore().CHANGEROLEINFO([])
    getTable()
    modifyDialog.value = false
    getTreeList()
  })
}
// 点击的是第几级
const treeSelect = (data: any) => {
  selectTreeNode.value = data.id
  level.value = data.level
  nodeMessege.value = data
  searchTableParams.value.filter = data.params
  if (level.value !== 4) {
    getTable()
  }
  getTableInfo()

  switch (level.value) {
    case '1':
      tabTitle.value = '单位信息'
      break
    case '2':
      tabTitle.value = '部门信息'
      break
    case '3':
      tabTitle.value = '角色信息'
      break
  }
}
// top
const getTableInfo = () => {
  let data = null
  switch (level.value) {
    case '1':
      getDwInfo()
      break
    case '2':
      data = {
        ...nodeMessege.value.params,
      }
      zzjgService.getBmInfo(data).then((res) => {
        bmInfoMesseage.value = res
      })
      break
    case '3':
      data = {
        ...nodeMessege.value.params,
      }
      zzjgService.getRoleInfo(data).then((res: any) => {
        roleInfoMesseage.value = res
      })
      break
    case '4':
      data = {
        ...nodeMessege.value.params,
      }
      zzjgService.getGrInfo(data).then((res) => {
        personalInformation.value = res
      })
      break
    default:
      getDwInfo()
      break
  }
}
// top
const getDwInfo = () => {
  const data = {
    ...nodeMessege.value.params,
  }
  if (data.dwbm) {
    zzjgService.getDanwInfo(data).then((res: any) => {
      dwInfoMesseage.value = res
    })
  }
}
// 抽屉
const showDrawer = () => {
  record.value = { ...nodeMessege.value }
  useZzjgStore().CHANGEROLEINFO([])
  //调序号的接口
  zzjgService.findMaxXhRybm({ zzdwbm: dwbm.value }).then((res: any) => {
    showDrawerFlag.value = true
    addPersonForm.value.xh = res.xh
  })
}
const setLoginOpen = () => {
  if (Number(level.value) > 0) {
    showSetLoginMode.value = true
    setLoginForm.value.range = '2'
  } else {
    ElMessage.warning('请选择树节点!!!')
  }
}
// 关闭抽屉
const onClose = () => {
  addPersonForm.value = {
    dlbm: '',
    mc: '',
    sfzh: '',
    dhhm: '',
    zzdwbm: dwbm.value,
    zzdwmc: userInfo.dwmc,
  }
  useZzjgStore().CHANGEROLEINFO([])
  showDrawerFlag.value = false
}
const onSearchRy = () => {
  huishouzhanRyParams.value.filter.gzzh = gzzh.value
  huishouzhanRyParams.value.filter.mc = mc.value
  getRecycleRy()
}
// 同步部门数据确定按钮
const tbbmsjDiaSureBtn = () => {
  tbbmsjBtn()
}
// 同步部门数据
const tbbmsjBtn = async () => {
  loading.value = true
  await zzjgService.tbbmsj({
    dwbm: dwbm.value,
    cjrbm: userInfo.rybm,
    cjrmc: userInfo.mc,
    dwmc: userInfo.dwmc,
    list: checkedList.value,
  })
  ElMessage.success('操作成功')
  tbbmsjDia.value = false
  loading.value = false
  getTreeList()
  checkedList.value = []
}
const sendBmlbListsApi = () => {
  zzjgService.queryBmLbFldm({}).then((res) => {
    bmlbListsApi.value = res.data
  })
}
// 添加部门获取最大序号
const findMaxXhByDwbm = () => {
  zzjgService.getMaxXhByDwbm({ dwbm: dwbm.value }).then((res) => {
    addForm.value.bmxh = res.data.bmxh
  })
}
// 单位下点击添加部门
const dwClickAddBm = () => {
  addForm.value = {
    bmmc: '',
    bmjc: '',
    bmwhjc: '',
    bmahjc: '',
    bmxh: '',
    fbmbm: '',
    sflsbm: '',
    bmlbList: [],
    bmlb: '',
    bz: '',
  }
  findMaxXhByDwbm()
  // 父部门得下拉列表
  getBmSelectLists()
  sendBmlbListsApi()
  bmTitle.value = '添加部门'
  showDepartment.value = true
}
const bmClickAddZbm = () => {
  showChildDeparment.value = true
  addChildFormFbmbm.value = nodeMessege.value.mc
  sendBmlbListsApi()
}
const changeBmInfo = () => {
  getBmSelectLists()
  sendBmlbListsApi()
  addForm.value = { ...bmInfoMesseage.value }
  bmTitle.value = '修改部门信息'
  showDepartment.value = true
}
// 删除部门
const deletDepartmentBtn = () => {
  if (nodeMessege.value.children?.length > 0) {
    ElMessage.warning('部门下有角色不能删除')
    return
  }
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const data = {
      ...nodeMessege.value.params,
    }
    await zzjgService.deletBm(data)
    getTreeList()
    getRecycleBm()
    ElMessage.success('删除成功')
  })
}
//添加部门 修改部门
const addDepartmentBtn = async () => {
  if (addForm.value.bmmc.length <= 0) {
    ElMessage.error('请完善信息')
    return
  }
  if (addForm.value.bmxh === '') {
    ElMessage.error('请完善信息')
    return
  }
  let data = null
  loading.value = true
  switch (bmTitle.value) {
    case '添加部门':
      data = {
        dwbm: dwbm.value,
        ...addForm.value,
      }
      await zzjgService.addBm(data)
      ElMessage.success('添加成功')
      getTreeList()
      showDepartment.value = false
      loading.value = false
      break
    case '修改部门信息':
      data = {
        dwbm: dwbm.value,
        ...addForm.value,
      }
      await zzjgService.changeBm(data)
      ElMessage.success('修改成功')
      getTreeList()
      getTableInfo()
      getBmSelectLists()
      showDepartment.value = false
      loading.value = false
      break
  }
}

// 获取部门下拉列表
const getBmSelectLists = async () => {
  const data = {
    dwbm: dwbm.value,
  }
  bmSelectList.value = (await zzjgService.getBmSelect(data)) as unknown as any[]
}

//删除放入回收站
const deleteIntoRecycleBtn = async () => {
  if (selectedTable.value.length > 0) {
    ElMessageBox.confirm('此操作将删除这些人员放入回收站, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const data = {
        ryList: selectedTable.value.map((item) => item.rybm),
        zzdwbm: dwbm.value,
      }
      await zzjgService.deleteIntoRecycle(data)
      ElMessage.success('删除成功')
      getTable()
      getRecycleBm()
      getRecycleRy()
    })
  } else {
    ElMessage.warning('请选择需要删除的人员')
  }
}
// 回收站恢复人员
const recycleHuifuRy = async () => {
  if (recycleSelectedTable.value.length > 0) {
    const ryList = recycleSelectedTable.value.map((item) => item.rybm)
    const params = {
      ryList,
      zzdwbm: dwbm.value,
    }
    await zzjgService.resumeByRecycle(params)
    getRecycleRy()
    //
    getTable()
    recycleSelectedTable.value = []
    ElMessage.success('恢复成功')
  } else {
    ElMessage.warning('请选择需要恢复的人员')
  }
}

// 回收站删除
const recycleShanChuBtn = () => {
  if (recycleSelectedTable.value.length > 0) {
    ElMessageBox.confirm('此操作将永久删除该人员, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const ryList = recycleSelectedTable.value.map((item) => item.rybm)
      const params = {
        ryList,
        zzdwbm: dwbm.value,
      }
      await zzjgService.deletRyRecycle(params)
      getRecycleRy()
      recycleSelectedTable.value = []
      ElMessage.success('删除成功')
    })
  } else {
    ElMessage.warning('请选择需要永久删除的人员')
  }
}
const zzFilter = ref('')
const filterTree = (value: any) => {
  searchTreeValue.value = value
  if (value) {
    const tree = JSON.parse(JSON.stringify(temporaryValue.value))
    zzjgml.value = filter(tree, value)
    // 展开所有的节点
    const arr: any[] = []
    const diGuiExpandedKeys = (m: any[]) => {
      for (const item of m) {
        arr.push(item.id)
        if (item.children && item.children.length > 0) {
          diGuiExpandedKeys(item.children)
        }
      }
    }
    diGuiExpandedKeys(zzjgml.value)
    defaultExpandedKeys.value = arr
  } else {
    defaultExpandedKeys.value = [temporaryValue.value[0].id]
    zzjgml.value = temporaryValue.value
  }
}
const copyFilter = ref()
const filterTree1 = (e: any) => {
  // 临时保存一个值
  const value = e
  if (value) {
    const tree = JSON.parse(JSON.stringify(copyRoleLists.value))
    copyRoleLists.value = filter(tree, value)
  } else {
    copyRoleLists.value = copyRoleLists1.value
  }
}
// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组
const filter = (nodes: any[], query: string) => {
  // 条件就是节点的title过滤关键字
  const predicate = (node: any) => pinyin.match(node.mc, query)
  if (!(nodes && nodes.length)) {
    return []
  }
  const newChildren = []
  for (const node of nodes) {
    // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
    // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
    // 2. 自己本身符合条件
    const subs = filter(node.children, query)
    if (predicate(node)) {
      newChildren.push(node)
    } else if (subs && subs.length) {
      node.children = subs
      newChildren.push(node)
    }
  }
  return newChildren.length ? newChildren : []
}
// 添加角色按钮
const addBmRoleBtn = () => {
  if (!bmRoleForm.value.jsmc) {
    ElMessage.error('请完善信息')
    return
  }
  const diGui = (m: any[], val: any) => {
    for (const item of m) {
      if (item.id === val) {
        bmRoleForm.value.mrzjldmc = item.mc
        break
      } else if (item.children && item.children.length > 0) {
        diGui(item.children, val)
      }
    }
  }
  diGui(zzjgml.value, bmRoleForm.value.zjldbm)
  zzjgService
    .addRoleApi({
      ...bmRoleForm.value,
      cjrbm: userInfo.rybm,
      cjrmc: userInfo.mc,
      dwmc: userInfo.dwmc,
    })
    .then(() => {
      getTreeList()
      showBmRole.value = false
      ElMessage.success('操作成功')
    })
}
// 添加角色
const addRole = () => {
  getSpxsmcLists()
  mrzjldTreeList(nodeMessege.value.id)
  bmRoleForm.value = {
    ...bmInfoMesseage.value,
    jsmc: '',
    mrzjldmc: '',
    zjldbm: '',
  }
  showBmRole.value = true
}
// 审批显示名称
const getSpxsmcLists = () => {
  zzjgService.addBtnSpxsmc().then((res) => {
    spxsmcLists.value = res.data
  })
}
// 修改角色
const changeRole = () => {
  getSpxsmcLists()
  changeRoleForm.value = { ...roleInfoMesseage.value }
  showChangeRole.value = true
}
// 修改角色确定按钮
const changeRoleInfoBtn = () => {
  zzjgService
    .updateRoleApi({
      ...changeRoleForm.value,
      zhxgrbm: userInfo.rybm,
      zhxgrmc: userInfo.mc,
    })
    .then(() => {
      ElMessage.success('修改成功')
      showChangeRole.value = false
      getTreeList()
    })
}

// 删除角色
const deletRole = () => {
  if (nodeMessege.value.children.length > 0) {
    ElMessage.warning('角色下有人员不能删除，请清空该角色下人员才能删除')
    return
  }
  ElMessageBox.confirm('此操作将永久删除该角色, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const data = {
      ...nodeMessege.value.params,
      zhxgrbm: userInfo.rybm,
      zhxgrmc: userInfo.mc,
    }
    await zzjgService.deletRoleApi(data)
    getTreeList()
    ElMessage.success('删除成功')
  })
}

const setLoginBtn = () => {
  if (!setLoginForm.value.range) {
    ElMessage.error('请选择设置范围')
    return
  }
  if (!setLoginForm.value.region) {
    ElMessage.error('请选择登录方式')
    return
  }
  if (setLoginForm.value.range === '1' && selectedTable.value.length < 1) {
    ElMessage.error('请选择人员')
    return
  }
  let data = null
  let ryList
  switch (setLoginForm.value.range) {
    case '1':
      ryList = selectedTable.value.map((item) => item.rybm)
      data = {
        dwbm: dwbm.value,
        ryList,
        dlfs: setLoginForm.value.region,
      }
      zzjgService.setPersonLoginMode(data).then(() => {
        ElMessage.success('操作成功')
        showSetLoginMode.value = false
        getTreeList()
      })
      break
    case '2':
      data = {
        ...nodeMessege.value.params,
        dlfs: setLoginForm.value.region,
      }
      zzjgService.setPersonLoginMode(data).then(() => {
        ElMessage.success('操作成功')
        showSetLoginMode.value = false
      })
      break
  }
}
// 添加子部门
const addChildDepartmentBtn = () => {
  if (addChildForm.value.bmmc.length <= 0) {
    ElMessage.warning('请完善信息')
  }
  const data = {
    dwbm: nodeMessege.value.params.dwbm,
    ...addChildForm.value,
    fbmbm: nodeMessege.value.params.bmbm,
  }
  zzjgService.addBm(data).then(() => {
    ElMessage.success('添加子部门成功')
    showChildDeparment.value = false
    getTreeList()
  })
}
const copySelects = ref<any[]>([])
const copyRoleSelects = (_: any, selectedKeys: any) => {
  copySelects.value = selectedKeys.checkedKeys
}
// 复制角色
const copyRole = () => {
  const data = {
    bmList: copySelects.value,
    ...nodeMessege.value.params,
    dwmc: userInfo.dwmc,
    cjrbm: userInfo.rybm,
    cjrmc: userInfo.mc,
  }
  zzjgService.copyBmRole(data).then(() => {
    ElMessage.success('操作成功')
    showCopyRole.value = false
    getTreeList()
  })
}

// 添加人员确定按钮
const addPersonSubmit = () => {
  if (
    !(
      addPersonForm.value.dlbm &&
      addPersonForm.value.mc &&
      addPersonForm.value.sfzh &&
      addPersonForm.value.dhhm &&
      addPersonForm.value.sflsry &&
      addPersonForm.value.dlfs &&
      addPersonForm.value.xh &&
      addPersonForm.value.jcrysf_dm
    )
  ) {
    ElMessage.warning('请完善必填项信息')
    return
  }
  // 判断是否选择角色 如果没选择角色,
  if (roleInfoMsg.value.length === 0) {
    ElMessageBox.confirm('当前人员未设置角色, 是否继续保存?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      addPersonApi()
    })
  } else {
    // 选择了角色,审批级别就必须填
    if (roleInfoMsg.value.length > 0) {
      for (const el of roleInfoMsg.value) {
        if (!el.spjbbm) {
          ElMessage.warning('请设置审批级别')
          return
        }
      }
    }
    addPersonApi()
  }
}
const addPersonApi = async () => {
  const rylx_mcArr = rylxLists.value.filter((item) => addPersonForm.value.rylx_bm === item.dm)
  const data = {
    ...addPersonForm.value,
    zzdwbm: dwbm.value,
    zzdwmc: userInfo.dwmc,
    cjrybm: cjrybm.value,
    cjrymc: cjrymc.value,
    ...nodeMessege.value.params,
    jsList:
      (roleInfoMsg.value &&
        roleInfoMsg.value.map((item) => {
          return {
            bmbm: item.params.bmbm,
            dwbm: item.params.dwbm,
            jsbm: item.params.jsbm,
            spjbbm: item.spjbbm,
            zjldbm: item.zjldbm,
          }
        })) ||
      [],
    rylx_mc: rylx_mcArr.length > 0 && rylx_mcArr[0].mc,
  }
  await zzjgService.addPerson(data)
  ElMessage.success('添加成功')
  showDrawerFlag.value = false
  showPerson.value = false
  addPersonForm.value = {
    dlbm: '',
    mc: '',
    xh: '',
    sflsry: 'N',
    dhhm: '',
    sfzh: '',
    rylx_mc: '',
    rylx_bm: '',
    jcrysf_dm: '',
    jcrysf_mc: '',
  }
  getTreeList()
}
// 表格查询
const timer = ref()
const onSearch = () => {
  clearTimeout(timer.value)
  timer.value = setTimeout(async () => {
    searchTableParams.value.filter.keyWorld = tableSearch.value
    const res: any = await zzjgService.queryTable(searchTableParams.value)
    personMessegeData.value = res.list
    pagination.value.total = res.total
  }, 500)
}
// 停职
const stopWork = () => {
  if (selectedTable.value.length > 0) {
    ElMessageBox.confirm('此操作将会把人员停职, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const ryList = selectedTable.value.map((item) => item.rybm)
      const params = {
        ryList,
        zzzt: '2',
        zzdwbm: selectedTable.value[0].zzdwbm,
      }
      await zzjgService.stopWorks(params)
      getTable()
      ElMessage.success('停职成功')
    })
  } else {
    ElMessage.warning('请选择停职的人员')
  }
}
// 恢复
const recovery = async (person: any) => {
  const params = {
    ryList: [person.rybm],
    zzzt: '1',
    zzdwbm: person.zzdwbm,
  }
  await zzjgService.stopWorks(params)
  getTable()
  ElMessage.success('复职成功')
}
// 清空密码
const emptyPwd = async (person: any) => {
  const params = {
    rybm: person.rybm,
    zzdwbm: person.zzdwbm,
  }
  await zzjgService.emptyPassword(params)
  getTable()
  ElMessage.success('操作成功')
}
// 移除角色
const yiChuRole = async (text: any) => {
  const params = {
    bmbm: nodeMessege.value.params.bmbm,
    dwbm: nodeMessege.value.params.dwbm,
    jsbm: nodeMessege.value.params.jsbm,
    rybm: text.rybm,
    zhxgrbm: text.rybm,
  }
  await zzjgService.deleteryjsfp(params)
  getTable()
  getTreeList()
  ElMessage.success('移除成功')
}
// api请求
// 查询树
const getTreeList = async () => {
  searchTableParams.value = {
    filter: {
      dwbm: dwbm.value,
      keyWorld: '',
    },
    orderBy: '',
  }
  const params = {
    dwbm: dwbm.value,
  }
  const res: any = await zzjgService.queryByDwbm(params)
  nodeMessege.value = res[0]
  level.value = 1
  zzjgml.value = res
  selectTreeNode.value = res[0].id
  temporaryValue.value = res
  filterTree(searchTreeValue.value)
  // 用于查询
  getTable()
  getDwInfo()
}
// 默认直接领导
const mrzjldTreeList = async (id?: any) => {
  const params = {
    dwbm: dwbm.value,
    id: id,
  }
  const res: any = await zzjgService.queryByDwbm(params)
  mrzjldml.value = res
  mrzjldTest.value = [res[0].id]
  treeExpandedKeys.value = [res[0].id]
}
// 查询树2
const getTreeList2 = async () => {
  const res: any = await zzjgService.queryZzjgRole({
    dwbm: dwbm.value,
  })
  copyRoleLists.value = res
  copyRoleLists1.value = res
  copyRoleLists.value[0].disabled = true
}

// 获取回收站部门信息
const getRecycleBm = async () => {
  const res: any = await zzjgService.queryBmbmByRecycle(huishouzhanBmglParams.value)
  huishouzhanLists.value = res.list
}
//回收站单独分页
const pagination3 = ref({
  pageSize: 10, // 一页的数据限制
  current: 1, // 当前页
  total: 0, // 总数
  pageChange: (val: { pageSize?: number; pageIndex?: number }) => {
    // 改变 pageSize时的回调
    pagination3.value.current = val.pageIndex || pagination3.value.current
    pagination3.value.pageSize = val.pageSize || pagination3.value.pageSize
    getRecycleRy()
  },
})
// 获取回收站部门人员信息
const getRecycleRy = async () => {
  const data = {
    ...huishouzhanRyParams.value,
    pageNum: pagination3.value.current,
    pageSize: pagination3.value.pageSize,
  }
  const res: any = await zzjgService.queryRyglByRecycle(data)
  pagination3.value.total = res.total
  huishouzhanRyLists.value = res.list
}
// 修改人员按钮
const changePersonBtn = () => {
  modifyActiveKey.value = '1'
  modifyPersonForm.value = { ...personalInformation.value }
  record.value = { ...personalInformation.value }
  modifyDialog.value = true
}
//离职人员按钮
const tingzhiPersonBtn = async () => {
  const ryList = [nodeMessege.value.params.rybm]
  const params = {
    ryList,
    zzzt: '2',
    zzdwbm: nodeMessege.value.params.zzdwbm,
  }
  await zzjgService.stopWorks(params)
  getPersonInfo()
  ElMessage.success('停职成功')
}
//复职人员按钮
const fuzhiPersonBtn = async () => {
  const params = {
    ryList: [nodeMessege.value.params.rybm],
    zzzt: '1',
    zzdwbm: nodeMessege.value.params.zzdwbm,
  }
  await zzjgService.stopWorks(params)
  getPersonInfo()
  ElMessage.success('复职成功')
}
// 查询个人信息
const getPersonInfo = () => {
  const data = {
    ...nodeMessege.value.params,
  }
  zzjgService.getGrInfo(data).then((res) => {
    personalInformation.value = res
  })
}
// 清空密码
const qingKongMm = async () => {
  const params = {
    rybm: nodeMessege.value.params.rybm,
    zzdwbm: nodeMessege.value.params.zzdwbm,
  }
  await emptyPwd(params)
  ElMessage.success('操作成功')
}
//删除放入回收站
const shanChuPeronBtn = () => {
  ElMessageBox.confirm('此操作将删除该人员放入回收站, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const data = {
      ryList: [nodeMessege.value.params.rybm],
      zzdwbm: nodeMessege.value.params.zzdwbm,
    }
    await zzjgService.deleteIntoRecycle(data)
    ElMessage.success('删除成功')
    searchTableParams.value = {
      filter: {
        dwbm: dwbm.value,
        keyWorld: '',
      },
      orderBy: '',
    }
    getTreeList()
    getRecycleBm()
    getRecycleRy()
  })
}
const filterFn = (value: string, data: any, node: any) => {
  if (value) return pinyin.match(node.label, value)
  return true
}
</script>

<template>
  <div class="zzjg-permission" v-loading="loading">
    <div class="zzjg-left" style="position: relative">
      <div class="tab-box zzjg-tab-box">
        <el-tree-select
          style="width: 100%"
          v-model="dwbm"
          :props="defaultProps"
          :data="dwList"
          node-key="dwbm"
          :clearable="false"
          check-strictly
          :filter-node-method="filterFn"
          filterable
          :expand-on-click-node="false"
          default-expand-all
          @change="changeTree"
        />
        <div style="height: 45px; margin-top: 8px">
          <el-input
            v-model="zzFilter"
            suffix-icon="Search"
            style="width: 100%"
            @input="filterTree"
            clearable
          />
        </div>
        <el-scrollbar max-height="calc(100vh - 440px)" style="height: auto">
          <el-tree
            v-if="zzjgml.length"
            style="width: 100%"
            @node-click="treeSelect"
            :current-node-key="selectTreeNode"
            :default-expanded-keys="defaultExpandedKeys"
            :data="zzjgml"
            :props="replaceFields"
            check-on-click-node
            :expand-on-click-node="false"
            node-key="id"
          >
            <template #default="{ node, data }">
              <el-icon>
                <HomeFilled v-if="data.level === '1'" />
                <User v-else-if="data.level === '4'" />
                <UserFilled v-else-if="data.level === '3'" />
                <OfficeBuilding v-else-if="data.level === '2'" />
              </el-icon>
              <span style="margin-left: 4px">{{ node.label }}</span>
            </template>
          </el-tree>
        </el-scrollbar>

        <!-- 回收站 -->
        <el-popover
          placement="top"
          class="recycle-popover"
          v-model:visible="recycleVisible"
          trigger="click"
          title="回收站"
          :width="1100"
        >
          <div class="card-container popover">
            <el-tabs model-value="2">
              <el-tab-pane name="2" label="人员管理">
                <div style="position: relative; border: 1px solid #dcdcdc">
                  <div class="popover-input">
                    <span style="margin-right: 4px">姓名:</span>
                    <el-input style="margin-right: 10px" v-model="mc" />
                    <span style="margin-right: 4px">工作证号:</span>
                    <el-input v-model="gzzh" />
                  </div>
                  <div style="position: absolute; right: 8px; top: 20px">
                    <el-button link type="primary" icon="Search" @click="onSearchRy">
                      查询
                    </el-button>
                    <el-button link type="warning" icon="RefreshRight" @click="recycleHuifuRy">
                      恢复
                    </el-button>
                    <el-button link type="danger" icon="Delete" @click="recycleShanChuBtn">
                      删除
                    </el-button>
                  </div>
                </div>

                <!-- 回收站人员table -->
                <div>
                  <el-table
                    height="400px"
                    style="margin-top: 4px"
                    class="sxlb"
                    :data="huishouzhanRyLists"
                    stripe
                    @selection-change="rYOnSelectChange"
                  >
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                      v-for="column in huishouzhanRyColumns"
                      :key="column.dataIndex"
                      :prop="column.dataIndex"
                      :label="column.title"
                      width="200"
                    />
                  </el-table>
                  <div style="margin-top: 12px">
                    <RePager
                      :page-change="pagination3.pageChange"
                      :total="pagination3.total"
                      :page-size="pagination3.pageSize"
                      :current="pagination3.current"
                    />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <template #reference>
            <div
              class="btn-group-item btn-group-delete-item single-btn"
              style="position: absolute; right: 10px; bottom: 10px"
            >
              <el-button link icon="TakeawayBox">回收站</el-button>
            </div>
          </template>
        </el-popover>
      </div>
    </div>

    <div class="right" v-if="level != 4">
      <div class="top" style="position: relative">
        <div class="card-container">
          <el-tabs model-value="1">
            <el-tab-pane name="1" :label="tabTitle">
              <div style="text-align: right; margin-bottom: 10px">
                <el-button
                  link
                  type="primary"
                  icon="Plus"
                  @click="dwClickAddBm"
                  v-show="level == 1 || level == ''"
                >
                  添加部门
                </el-button>
                <el-button
                  link
                  type="primary"
                  icon="Plus"
                  @click="bmClickAddZbm"
                  v-show="level == 2"
                >
                  添加子部门
                </el-button>
                <el-button link type="primary" icon="Plus" @click="addRole" v-show="level == 2">
                  添加角色
                </el-button>
                <el-button
                  link
                  type="primary"
                  icon="DocumentCopy"
                  @click="showCopyRole = true"
                  v-show="level == 2"
                >
                  复制角色
                </el-button>
                <el-button
                  link
                  type="warning"
                  icon="Edit"
                  v-show="level == 2"
                  @click="changeBmInfo"
                >
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  icon="Delete"
                  @click="deletDepartmentBtn"
                  v-show="level == 2"
                >
                  删除
                </el-button>
                <el-button
                  link
                  type="warning"
                  icon="DocumentChecked"
                  v-show="level == 3"
                  @click="toGoYhsq"
                >
                  授权
                </el-button>
                <el-button link type="warning" icon="Edit" @click="changeRole" v-show="level == 3">
                  修改角色
                </el-button>
                <el-button link type="danger" icon="Delete" @click="deletRole" v-show="level == 3">
                  删除角色
                </el-button>
                <el-button
                  link
                  type="primary"
                  icon="MostlyCloudy"
                  v-show="level == 1 || level == ''"
                  @click="tbbmsjDia = true"
                >
                  同步部门数据
                </el-button>
              </div>
              <div>
                <table style="table-layout: fixed" class="zzjgTable" aria-describedby="人员">
                  <tr v-show="level == 1 || level == ''">
                    <th>单位名称</th>
                    <th>{{ userInfo.dwmc }}</th>
                    <th>单位编码</th>
                    <th>{{ dwInfoMesseage.dwbm }}</th>
                  </tr>
                  <tr v-show="level == 1 || level == ''">
                    <td>单位简称</td>
                    <td>{{ dwInfoMesseage.dwjc }}</td>
                    <td>单位属性</td>
                    <td>{{ dwInfoMesseage.dwsx }}</td>
                  </tr>
                  <tr v-show="level == 1 || level == ''">
                    <td>单位级别</td>
                    <td>{{ dwInfoMesseage.dwjb }}</td>
                  </tr>

                  <tr v-show="level == 2">
                    <td>单位名称</td>
                    <td>{{ userInfo.dwmc }}</td>
                    <td>部门名称</td>
                    <td>{{ bmInfoMesseage.bmmc }}</td>
                  </tr>
                  <tr v-show="level == 2">
                    <td>部门简称</td>
                    <td>{{ bmInfoMesseage.bmjc }}</td>
                    <td>是否临时部门</td>
                    <td>{{ bmInfoMesseage.sflsbmmc }}</td>
                  </tr>
                  <tr v-show="level == 2">
                    <td>部门序号</td>
                    <td>{{ bmInfoMesseage.bmxh }}</td>
                  </tr>

                  <tr v-show="level == 3">
                    <td>部门名称</td>
                    <td>{{ roleInfoMesseage.bmmc }}</td>
                    <td>角色名称</td>
                    <td>{{ roleInfoMesseage.jsmc }}</td>
                  </tr>
                  <tr v-show="level == 3">
                    <td>审批显示名称</td>
                    <td>{{ roleInfoMesseage.spxsmc }}</td>
                    <td>默认审批级别</td>
                    <td>{{ roleInfoMesseage.spjbmc }}</td>
                  </tr>
                  <tr v-show="level == 3">
                    <td>默认直接领导</td>
                    <td>
                      {{ roleInfoMesseage.zjldmc }}
                    </td>
                    <td>角色序号</td>
                    <td>{{ roleInfoMesseage.jsxh }}</td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="bottom">
        <div class="card-container">
          <el-tabs model-value="1">
            <el-tab-pane name="1" label="人员信息">
              <div style="height: 45px">
                <div style="float: left">
                  <el-input
                    suffix-icon="Search"
                    v-model="tableSearch"
                    placeholder="输入关键字查询"
                    style="width: 300px"
                    @input="onSearch"
                    clearable
                  />
                </div>
                <div class="btn-group" style="float: right">
                  <el-button link type="primary" icon="Setting" @click="setLoginOpen">
                    设置登录
                  </el-button>
                  <el-button link type="primary" icon="Plus" @click="addDia"> 添加 </el-button>
                  <el-button link type="warning" icon="Close" @click="stopWork"> 停职 </el-button>
                  <el-button link type="danger" icon="Delete" @click="deleteIntoRecycleBtn">
                    删除
                  </el-button>
                </div>
              </div>

              <div>
                <el-table
                  height="100%"
                  :data="personMessegeData"
                  @selection-change="onSelectChange"
                >
                  <el-table-column type="selection" width="55" />
                  <el-table-column
                    v-for="column in nodeMessege.level == 1
                      ? personMessegeColumns
                      : personMessegeColumns1"
                    show-overflow-tooltip
                    :key="column.dataIndex"
                    :prop="column.dataIndex"
                    :label="column.title"
                  />
                  <el-table-column label="操作" width="250" fixed="right">
                    <template #default="scope">
                      <el-button link type="primary" @click="onEdit(scope.row)">修改</el-button>
                      <el-button
                        v-if="scope.row.dlsbcs >= 5"
                        link
                        type="primary"
                        @click="jieShuo(scope.row)"
                        >解锁</el-button
                      >
                      <el-button
                        v-if="scope.row.zzzt == '停岗'"
                        link
                        type="primary"
                        @click="recovery(scope.row)"
                        >复职</el-button
                      >
                      <el-button link type="warning" @click="emptyPwd(scope.row)"
                        >清空密码</el-button
                      >
                      <el-button
                        v-if="userInfo.sjly == '2'"
                        link
                        type="warning"
                        @click="reset(scope.row)"
                        >重置密码</el-button
                      >
                      <el-button
                        v-if="nodeMessege.level == '3'"
                        link
                        type="danger"
                        @click="yiChuRole(scope.row)"
                        >移除角色</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div style="margin-top: 12px">
                  <RePager
                    :page-change="pagination.pageChange"
                    :total="pagination.total"
                    :page-size="pagination.pageSize"
                    :current="pagination.current"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 个人信息 -->
    <div class="personalInformation" v-if="level == 4">
      <div class="header">
        <div class="btn-group" style="float: right; margin-right: 5px">
          <el-button link icon="Edit" type="primary" @click="changePersonBtn"> 修改 </el-button>
          <el-button link icon="DocumentChecked" type="warning" @click="toGoYhsq"> 授权 </el-button>
          <el-button
            link
            icon="DocumentChecked"
            type="warning"
            @click="jieShuo2"
            v-if="personalInformation.sd"
          >
            解锁
          </el-button>
          <el-button
            link
            icon="Close"
            type="warning"
            @click="tingzhiPersonBtn"
            v-if="personalInformation.zzzt == '在职'"
          >
            停职
          </el-button>
          <el-button
            link
            icon="Close"
            type="warning"
            @click="fuzhiPersonBtn"
            v-if="personalInformation.zzzt == '停岗'"
          >
            复职
          </el-button>
          <el-button link icon="Close" type="warning" @click="qingKongMm"> 清空密码 </el-button>
          <el-button link icon="Delete" type="danger" @click="shanChuPeronBtn"> 删除 </el-button>
        </div>
      </div>
      <div class="mainBody">
        <div style="padding-left: 10px" class="grxsClass">个人信息</div>
        <div style="margin-top: 10px">
          <table style="table-layout: fixed" class="riginalTable" aria-describedby="个人信息">
            <tr>
              <th>姓名</th>
              <th>{{ personalInformation.mc }}</th>
              <th>登录名</th>
              <th>{{ personalInformation.dlbm }}</th>
            </tr>
            <tr>
              <td>性别</td>
              <td>{{ personalInformation.xb == 0 ? '女' : '男' }}</td>
              <td>登录方式</td>
              <td>{{ personalInformation.dlfs }}</td>
            </tr>
            <tr>
              <td>身份证号</td>
              <td>{{ personalInformation.sfzh }}</td>
              <td>电子邮件</td>
              <td>{{ personalInformation.dzyj }}</td>
            </tr>
            <tr>
              <td>手机(用于接收信息)</td>
              <td>{{ personalInformation.dhhm }}</td>
              <td>电话</td>
              <td>{{ personalInformation.dlbm }}</td>
            </tr>
            <tr>
              <td>人员类型</td>
              <td>{{ personalInformation.rylx_mc }}</td>
              <td>序号</td>
              <td>{{ personalInformation.xh }}</td>
            </tr>
            <tr>
              <td>CA标识</td>
              <td>{{ personalInformation.caid }}</td>
              <td>状态</td>
              <td>{{ personalInformation.zzzt }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 添加部门 -->
    <el-dialog v-model="showDepartment" :title="bmTitle" align-center style="width: 900px">
      <table class="riginalTable" style="table-layout: fixed" aria-describedby="添加部门">
        <tr>
          <th style="width: 16%">
            <span class="red">*</span>
            <span>部门名称</span>
          </th>
          <th>
            <input v-model="addForm.bmmc" class="riginalInput" />
            <span style="float: left; color: red; padding-left: 4px" v-if="addForm.bmmc.length <= 0"
              >不能为空</span
            >
          </th>
          <th style="width: 16%">
            <span>部门简称</span>
          </th>
          <th>
            <input class="riginalInput" v-model="addForm.bmjc" />
          </th>
        </tr>
        <tr>
          <td>
            <span>部门文号名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addForm.bmwhjc" />
          </td>
          <td>
            <span>部门案号简称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addForm.bmahjc" />
          </td>
        </tr>
        <tr>
          <td>
            <span class="red">*</span>
            <span>部门序号</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addForm.bmxh" />
          </td>
          <td>
            <span>父部门</span>
          </td>
          <td style="width: 100%; padding-right: 0">
            <el-tree-select
              style="width: 100%"
              v-model="addForm.fbmbm"
              defaultExpandAll
              :props="defaultProps1"
              :data="bmSelectList"
              node-key="bm"
              check-strictly
              filterable
              clearable
            />
          </td>
        </tr>
        <tr>
          <td>是否临时部门</td>
          <td>
            <el-radio-group v-model="addForm.sflsbm">
              <el-radio label="Y"> 是 </el-radio>
              <el-radio label="N"> 否 </el-radio>
            </el-radio-group>
          </td>
          <td>部门类别</td>
          <td style="width: 100%; padding-right: 0">
            <el-select
              v-model="addForm.bmlbList"
              style="width: 100%"
              multiple
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                :value="item.dm"
                v-for="(item, i) in bmlbListsApi"
                :key="i"
                :label="item.mc"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td>
            <input class="riginalInput" v-model="addForm.bz" />
          </td>
          <td />
          <td />
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addDepartmentBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加角色 -->
    <el-dialog v-model="showBmRole" title="添加角色" align-center>
      <table class="riginalTable" style="table-layout: fixed" aria-describedby="添加角色">
        <tr>
          <th>
            <span>单位名称</span>
          </th>
          <th>
            <input
              v-model="userInfo.dwmc"
              class="riginalInput"
              disabled
              style="cursor: not-allowed; width: 100%"
            />
          </th>
          <th>
            <span class="red">*</span>
            <span>部门名称</span>
          </th>
          <th>
            <input
              class="riginalInput"
              v-model="bmRoleForm.bmmc"
              disabled
              style="cursor: not-allowed; width: 100%"
            />
          </th>
        </tr>
        <tr>
          <td>
            <span class="red">*</span>
            <span>角色名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="bmRoleForm.jsmc" />
            <span
              style="float: left; color: red; padding-left: 4px"
              v-if="bmRoleForm.jsmc.length <= 0"
              >不能为空</span
            >
          </td>
          <td>
            <span>审批级别</span>
          </td>
          <td>
            <el-select v-model="bmRoleForm.spjbbm" style="width: 100%">
              <el-option
                :value="item.spjbbm"
                v-for="(item, i) in spxsmcLists"
                :key="i"
                :label="item.spjbmc"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <span>角色序号</span>
          </td>
          <td>
            <input class="riginalInput" v-model="bmRoleForm.jsxh" />
          </td>
          <td>
            <span>审批显示名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="bmRoleForm.spxsmc" />
          </td>
        </tr>
        <tr>
          <td>
            <span>默认直接领导</span>
          </td>
          <td style="width: 100%; padding-right: 0">
            <el-tree-select
              style="width: 100%"
              v-model="bmRoleForm.zjldbm"
              defaultExpandAll
              :props="defaultProps1"
              :data="mrzjldml"
              node-key="id"
              check-strictly
              filterable
              clearable
            />
          </td>
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addBmRoleBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改角色 -->
    <el-dialog v-model="showChangeRole" title="修改角色" align-center>
      <table class="riginalTable" style="table-layout: fixed" aria-describedby="修改角色">
        <tr>
          <th>
            <span>单位名称</span>
          </th>
          <th>
            <input
              v-model="userInfo.dwmc"
              class="riginalInput"
              disabled
              style="cursor: not-allowed; width: 100%"
            />
          </th>
          <th>
            <span class="red">*</span>
            <span>部门名称</span>
          </th>
          <th>
            <input
              class="riginalInput"
              v-model="changeRoleForm.bmmc"
              disabled
              style="cursor: not-allowed; width: 100%"
            />
          </th>
        </tr>
        <tr>
          <td>
            <span class="red">*</span>
            <span>角色名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="changeRoleForm.jsmc" />
            <span
              style="float: left; color: red; padding-left: 4px"
              v-if="changeRoleForm.jsmc.length <= 0"
              >不能为空</span
            >
          </td>
          <td>
            <span>审批级别</span>
          </td>
          <td>
            <el-select v-model="changeRoleForm.spjbbm" style="width: 100%">
              <el-option
                :value="item.spjbbm"
                v-for="(item, i) in spxsmcLists"
                :key="i"
                :label="item.spjbmc"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <span>角色序号</span>
          </td>
          <td>
            <input class="riginalInput" v-model="changeRoleForm.jsxh" />
          </td>
          <td>
            <span>默认直接领导</span>
          </td>
          <td style="width: 100%; padding-right: 0">
            <el-tree-select
              style="width: 100%"
              v-model="changeRoleForm.zjldbm"
              defaultExpandAll
              :props="defaultProps1"
              :data="mrzjldml"
              node-key="id"
              check-strictly
              filterable
              clearable
            />
          </td>
        </tr>
        <tr>
          <td>
            <span>审批显示名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="changeRoleForm.spxsmc" />
          </td>
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="changeRoleInfoBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 设置登录方式 -->
    <el-dialog v-model="showSetLoginMode" title="设置登录方式" align-center>
      <table class="riginalTable" style="table-layout: fixed" aria-describedby="设置登录方式">
        <tr>
          <th style="width: 18%">设置范围</th>
          <th>
            <el-radio-group v-model="setLoginForm.range">
              <el-radio label="1"> 当前选中列表 </el-radio>
              <el-radio label="2">
                <span v-if="nodeMessege && level == 1">
                  当前单位({{ nodeMessege && nodeMessege.mc }})
                </span>
                <span v-if="nodeMessege && level == 2">
                  当前部门({{ nodeMessege && nodeMessege.mc }})
                </span>
                <span v-if="nodeMessege && level == 3">
                  当前角色({{ nodeMessege && nodeMessege.mc }})
                </span>
              </el-radio>
            </el-radio-group>
          </th>
        </tr>
        <tr>
          <td>登录方式</td>
          <td style="padding-right: 0">
            <el-select v-model="setLoginForm.region" placeholder="please select your zone">
              <el-option value="账号密码，CA Key" label="账号密码，CA Key" />
              <el-option value="账号密码" label="账号密码" />
              <el-option value=" CA Key" label="CA Key" />
            </el-select>
          </td>
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="setLoginBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 抽屉 -->
    <el-drawer
      title="添加人员"
      direction="rtl"
      size="60%"
      v-model="showDrawerFlag"
      @close="onClose"
    >
      <div class="card-container">
        <el-tabs model-value="1">
          <el-tab-pane name="1" label="人员信息">
            <div style="padding: 10px">
              <table class="riginalTable" style="table-layout: fixed" aria-describedby="添加人员">
                <tr>
                  <th>
                    <span class="red">*（必填）</span>
                    <span>姓名</span>
                  </th>
                  <th>
                    <input class="riginalInput" v-model="addPersonForm.mc" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="addPersonForm.mc.length <= 0"
                      >不能为空</span
                    >
                  </th>
                  <th>
                    <span class="red">*（必填）</span>
                    <span>登录名</span>
                  </th>
                  <th>
                    <input class="riginalInput" v-model="addPersonForm.dlbm" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="addPersonForm.dlbm.length <= 0"
                      >不能为空</span
                    >
                  </th>
                </tr>
                <tr>
                  <td>性别</td>
                  <td>
                    <el-radio-group v-model="addPersonForm.xb">
                      <el-radio label="0"> 女 </el-radio>
                      <el-radio label="1"> 男 </el-radio>
                    </el-radio-group>
                  </td>
                  <td>
                    <span>CA标识</span>
                  </td>
                  <td>
                    <input class="riginalInput" v-model="addPersonForm.caid" />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="red">*（必填）</span>
                    <span>身份证号</span>
                  </td>
                  <td>
                    <DiyInput v-model="addPersonForm.sfzh" />
                  </td>
                  <td>
                    <span>电子邮件</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <input class="riginalInput" v-model="addPersonForm.dzyj" />
                  </td>
                </tr>

                <!-- 手机用于接收信息 -->
                <tr>
                  <td>
                    <span class="red">*（必填）</span>
                    <span>手机(用于接收信息)</span>
                  </td>
                  <td>
                    <input class="riginalInput" v-model="addPersonForm.dhhm" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="addPersonForm.dhhm.length <= 0"
                      >不能为空</span
                    >
                  </td>
                  <td>
                    <span>是否临时人员</span>
                    <span class="red">*</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-radio-group v-model="addPersonForm.sflsry">
                      <el-radio label="Y"> 是 </el-radio>
                      <el-radio label="N"> 否 </el-radio>
                    </el-radio-group>
                  </td>
                </tr>

                <!-- 人员类型 -->
                <tr>
                  <td>
                    <span>人员类型</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-select
                      v-model="addPersonForm.rylx_bm"
                      style="width: 100%; padding-right: 0"
                    >
                      <el-option
                        :value="item.dm"
                        v-for="item in rylxLists"
                        :key="item.dm"
                        :label="item.mc"
                      />
                    </el-select>
                  </td>
                  <td>
                    <span class="red">*</span>
                    <span>序号</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <input class="riginalInput" v-model="addPersonForm.xh" />
                  </td>
                </tr>

                <!-- CA标识 -->
                <tr>
                  <td>
                    <span class="red">*（必填）</span>
                    <span>登录方式</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-select v-model="addPersonForm.dlfs" style="width: 100%; padding-right: 0">
                      <el-option value="账号密码、CA Key" label="账号密码、CA Key" />
                      <el-option value="帐号密码" label="帐号密码" />
                      <el-option value="CA Key" label="CA Key" />
                    </el-select>
                  </td>
                  <td>
                    <span class="red">*（必填）</span>
                    <span>身份</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-tree-select
                      style="width: 100%"
                      v-model="addPersonForm.jcrysf_dm"
                      defaultExpandAll
                      :props="defaultProps1"
                      :data="shengFenml"
                      node-key="dm"
                      check-strictly
                      filterable
                      clearable
                    />
                  </td>
                </tr>
              </table>
            </div>
            <div style="text-align: right">
              <el-button type="primary" style="margin-right: 6px" @click="addPersonSubmit">
                确定
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="2" label="角色信息">
            <RoleInfo :record="record" />
            <div style="text-align: right">
              <el-button
                type="primary"
                style="margin-right: 6px; margin-top: 10px"
                @click="addPersonSubmit"
              >
                确定
              </el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

    <!-- 添加人员 -->
    <el-dialog
      v-model="showPerson"
      title="添加人员"
      @close="closeAddRy"
      align-center
      :footer="null"
    >
      <div style="position: relative; width: 100%">
        <el-input
          style="margin-bottom: 10px; width: 300px"
          @input="onSearch2"
          v-model="addDiaKeyWorld"
        />
        <div
          class="btn-group-item single-btn"
          style="position: absolute; right: 10px; top: 6px"
          @click="showDrawer"
        >
          添加人员
        </div>
      </div>
      <div>
        <el-table :data="addTableData">
          <el-table-column
            v-for="column in personMessegeColumns2"
            :key="column.dataIndex"
            :prop="column.dataIndex"
            :label="column.title"
          />
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button
                v-show="nodeMessege.level == 3"
                link
                type="primary"
                @click="addRoleDia(scope.row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 12px">
          <RePager
            :page-change="pagination2.pageChange"
            :total="pagination2.total"
            :page-size="pagination2.pageSize"
            :current="pagination2.current"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 添加子部门 -->
    <el-dialog v-model="showChildDeparment" title="添加子部门" style="width: 900px" align-center>
      <table class="riginalTable" style="table-layout: fixed" aria-describedby="修改人员">
        <tr>
          <th>
            <span class="red">*</span>
            <span>部门名称</span>
          </th>
          <th>
            <input v-model="addChildForm.bmmc" class="riginalInput" />
            <span
              style="float: left; color: red; padding-left: 4px"
              v-if="addChildForm.bmmc.length <= 0"
              >不能为空</span
            >
          </th>
          <th>
            <span class="red">*</span>
            <span>部门简称</span>
          </th>
          <th>
            <input class="riginalInput" v-model="addChildForm.bmjc" />
          </th>
        </tr>
        <tr>
          <td>
            <span>部门文号名称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addChildForm.bmwhjc" />
          </td>
          <td>
            <span>部门案号简称</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addChildForm.bmahjc" />
          </td>
        </tr>
        <tr>
          <td>
            <span class="red">*</span>
            <span>部门序号</span>
          </td>
          <td>
            <input class="riginalInput" v-model="addChildForm.bmxh" />
          </td>
          <td>
            <span>父部门</span>
          </td>
          <td>
            <input
              class="riginalInput"
              v-model="addChildFormFbmbm"
              disabled
              style="cursor: not-allowed; width: 100%"
            />
          </td>
        </tr>
        <!-- radio  select-->
        <tr>
          <td>是否临时部门</td>
          <td>
            <el-radio-group v-model="addChildForm.sflsbm">
              <el-radio label="Y"> 是 </el-radio>
              <el-radio label="N"> 否 </el-radio>
            </el-radio-group>
          </td>
          <td>
            <span class="red">*</span>
            部门类别
          </td>
          <td style="width: 100%; padding-right: 0">
            <el-select
              v-model="addChildForm.bmlbList"
              style="width: 100%"
              multiple
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                :value="item.dm"
                v-for="(item, i) in bmlbListsApi"
                :key="i"
                :label="item.mc"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td>
            <input class="riginalInput" v-model="addChildForm.bz" />
          </td>
          <td />
          <td />
        </tr>
      </table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addChildDepartmentBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 复制角色 -->
    <el-dialog v-model="showCopyRole" title="复制角色" class="fzjs" align-center>
      <el-input style="margin-bottom: 8px" v-model="copyFilter" @input="filterTree1" />
      <el-scrollbar height="400px">
        <el-tree
          show-checkbox
          node-key="id"
          defaultExpandAll
          :data="copyRoleLists"
          @check="copyRoleSelects"
          :props="replaceFields"
        />
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="copyRole">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改人员 -->
    <el-dialog
      v-model="modifyDialog"
      width="1000px"
      title="修改人员"
      align-center
      @close="changeDiaClose"
    >
      <div class="card-container">
        <el-tabs v-model="modifyActiveKey">
          <el-tab-pane name="1" label="人员信息">
            <div style="padding: 10px">
              <table class="riginalTable" style="table-layout: fixed" aria-describedby="修改人员">
                <tr>
                  <th style="width: 18%">
                    <span class="red">*</span>
                    <span>姓名</span>
                  </th>
                  <th>
                    <input class="riginalInput" v-model="modifyPersonForm.mc" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="modifyPersonForm.mc && modifyPersonForm.mc.length <= 0"
                      >不能为空</span
                    >
                  </th>
                  <th style="width: 18%">
                    <span class="red">*</span>
                    <span>登录名</span>
                  </th>
                  <th>
                    <input class="riginalInput" v-model="modifyPersonForm.dlbm" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="modifyPersonForm.dlbm && modifyPersonForm.dlbm.length <= 0"
                      >不能为空</span
                    >
                  </th>
                </tr>

                <tr>
                  <td>性别</td>
                  <td>
                    <el-radio-group v-model="modifyPersonForm.xb">
                      <el-radio label="0"> 女 </el-radio>
                      <el-radio label="1"> 男 </el-radio>
                    </el-radio-group>
                  </td>
                  <td>
                    <span>CA标识</span>
                  </td>
                  <td>
                    <input class="riginalInput" v-model="modifyPersonForm.caid" />
                  </td>
                </tr>

                <tr>
                  <td>
                    <span class="red">*</span>
                    <span>身份证号</span>
                  </td>
                  <td>
                    <DiyInput v-model="modifyPersonForm.sfzh" />
                  </td>
                  <td>
                    <span>电子邮件</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <input class="riginalInput" v-model="modifyPersonForm.dzyj" />
                  </td>
                </tr>

                <!-- 手机用于接收信息 -->
                <tr>
                  <td>
                    <span class="red">*</span>
                    <span>手机(用于接收信息)</span>
                  </td>
                  <td>
                    <input class="riginalInput" v-model="modifyPersonForm.dhhm" />
                    <span
                      style="float: left; color: red; padding-left: 4px"
                      v-if="modifyPersonForm.dhhm && modifyPersonForm.dhhm.length <= 0"
                      >不能为空</span
                    >
                  </td>
                  <td>
                    <span>办公电话</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <input class="riginalInput" />
                  </td>
                </tr>

                <!-- 人员类型 -->
                <tr>
                  <td>
                    <span>人员类型</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-select
                      v-model="modifyPersonForm.rylx_bm"
                      style="width: 100%; padding-right: 0"
                    >
                      <el-option
                        :value="item.dm"
                        v-for="item in rylxLists"
                        :key="item.dm"
                        :label="item.mc"
                      />
                    </el-select>
                  </td>
                  <td>
                    <span class="red">*</span>
                    <span>序号</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <input class="riginalInput" v-model="modifyPersonForm.xh" />
                  </td>
                </tr>

                <tr>
                  <td>
                    <span class="red">*</span>
                    <span>登录方式</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-select
                      v-model="modifyPersonForm.dlfs"
                      style="width: 100%; padding-right: 0"
                    >
                      <el-option value="账号密码、CA Key" label="账号密码、CA Key" />
                      <el-option value="帐号密码" label="帐号密码" />
                      <el-option value="CA Key" label="CA Key" />
                    </el-select>
                  </td>
                  <td>
                    <span>身份</span>
                    <span class="red">*</span>
                  </td>
                  <td style="width: 100%; padding-right: 0">
                    <el-tree-select
                      style="width: 100%"
                      v-model="modifyPersonForm.jcrysf_dm"
                      defaultExpandAll
                      :props="defaultProps1"
                      :data="shengFenml"
                      node-key="dm"
                      check-strictly
                      filterable
                      clearable
                    />
                  </td>
                </tr>
              </table>
            </div>
          </el-tab-pane>
          <el-tab-pane name="2" label="角色信息" />
        </el-tabs>
        <div style="padding: 16px">
          <RoleInfo ref="roles" v-show="modifyActiveKey == '2'" :record="record" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="modifySureBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 同步部门数据 -->
    <el-dialog v-model="tbbmsjDia" title="同步部门数据" align-center>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="option in plainOptions" :key="option" :label="option" />
      </el-checkbox-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="tbbmsjDiaSureBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 重置密码 -->
    <el-dialog
      v-model="resetDia"
      title="重置密码"
      class="zzjgService.addPerson cz"
      align-center
      @close="czcancel"
    >
      <div style="margin-bottom: 15px">
        <span style="margin-right: 8px; width: 60px; display: inline-block">新密码:</span>
        <el-input style="width: 85%" v-model="ruleForm.pass" type="password" show-password />
      </div>
      <div>
        <span style="margin-right: 8px; width: 60px; display: inline-block">确认密码:</span>
        <el-input style="width: 85%" v-model="ruleForm.checkPass" type="password" show-password />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="resetDiaBtn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.zzjg-permission {
  width: 100%;
  background: #f0f2f5;
  display: flex;
  .zzjg-left {
    min-width: 280px;
    max-width: 280px;
    height: 100%;
    margin-right: 12px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    .tab-box {
      padding: 10px;
    }

    .zzjg-tab-box {
      height: calc(100% - 40px);
      border: none !important;
    }
    .el-tree {
      margin-top: 8px;
      &:deep(.el-tree-node) {
        &.is-current {
          position: relative;
          .el-tree-node__content {
            background-color: #d3effc;
            color: #409eff;
            &:hover {
              background-color: #d3effc;
            }
          }
        }
        & > .el-tree-node__children {
          & > .el-tree-node.is-current {
            & > .el-tree-node__content {
              background-color: #d3effc;
              color: #409eff;
              &:hover {
                background-color: #d3effc;
              }
            }
          }
          & > .el-tree-node:not(.is-current) {
            & > .el-tree-node__content {
              color: #666;
              background-color: #fff;
            }
          }
        }
        .el-tree-node__content {
          height: 32px;
          color: #666;
          &:hover {
            background-color: #dcdcdc;
          }
        }
      }
    }
  }
  .personalInformation {
    float: right;
    height: 100%;
    width: calc(100% - 296px);
    background-color: #fff;
    border: 1px solid #dcdcdc;
    .header {
      height: 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #dcdcdc;
      .btn-group {
        height: 40px;
        line-height: 40px;
      }
    }
    .mainBody {
      padding: 10px;
    }
  }
  .right {
    height: 100%;
    flex: 1;
    min-width: 908px;
    .top {
      height: 220px;
      background-color: #fff;
      border: 1px solid #dcdcdc;
    }
    .bottom {
      margin-top: 10px;
      height: calc(100% - 230px);
      background-color: #fff;
      border: 1px solid #dcdcdc;
    }
  }
  .single-btn {
    cursor: pointer;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #666;
  }
}
.card-container {
  .el-tabs {
    border: none;
  }
  :deep(.el-tabs__nav) {
    padding: 0 16px;
    .el-tabs__active-bar {
      background-color: #1890ff;
    }
    .is-active {
      color: #1890ff;
      font-size: 16px;
      font-weight: 700;
    }
  }
  :deep(.el-tab-pane) {
    padding: 0 16px 16px;
  }
  :deep(.el-collapse-item__header) {
    padding-left: 12px;
    color: #666;
    font-weight: bold;
    border-bottom: 1px solid #dcdcdc;
    &::before {
      content: '';
      height: 19px;
      border-left: 4px solid #0090ff;
      position: relative;
      left: -10px;
      top: 0;
    }
  }
  :deep(.el-collapse-item__content) {
    padding: 16px 0;
  }
}
.collapse-item {
  font-size: 16px;
  .panel-title {
    height: unset;
    div {
      display: inline-block;
      box-sizing: border-box;
      padding: 0px 18px;
      text-align: center;
      line-height: 28px;
      margin-bottom: 10px;
      height: 28px !important;
      font-size: 14px;
      border-radius: 3px;
      min-width: 78px;
      background-color: rgba(0, 144, 255, 0.2);
      color: #195482;
      border: 1px solid #dcdcdc;
    }
  }
}
.popover-input {
  padding-left: 10px;
  height: 56px;
  width: 100%;
  line-height: 56px;
  .el-input {
    width: auto;
  }
}
.zzjgTable {
  width: 100%;
  height: 100%;
  tr,
  th,
  td {
    border: 1px solid #dcdcdc;
    height: 36px;
    text-align: right;
    padding-right: 10px;
    color: #666;
    font-size: 14px;
    font-weight: normal;
    border-collapse: collapse; //不加上这个会重合边框
  }
}

:deep(.el-dialog__body) {
  padding: 10px 20px;
}
</style>
